<?php
     //$extensions = str_replace([',','，'],"|",$extensions);
 ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资源上传</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <link rel="stylesheet" href="/static/plugs/webuploader/webuploader.css">
    <script src="/static/plugs/cpjs/src/lib/jquery/jquery_v3.5.1.min.js"></script>
    <script src="https://www.layuicdn.com/layer-v3.5.1/layer.js" type="text/javascript"></script>
    <script src="/static/plugs/webuploader/webuploader.min.js"></script>
    <script type="text/javascript">
        var fileList = [];
        var url= '{:addons_url("upyunup://admin_index/upfile",["multi"=>$multi,"filetype"=>$filetype,"app"=>$app])}';
        var multiple = parseInt('{$multi}');
        var exts = '{$extensions}';
        var max_files = parseInt('{$max_files}');
        var upload_max_filesize = parseInt('{$upload_max_filesize}');
        var file_type  = '{$filetype}'
        var chunk_size = parseInt('{$chunk_size}' * 1024)
    </script>
</head>
<body>
<div class="up-container">
    <div id="uploader" class="wu-example">
        <div id="thelist" class="uploader-list"></div>
        <div class="btns" style="display: flex;justify-content: left">
            <div id="picker">选择文件</div>
            <button type="button" id="ctlBtn" class="btn btn-default layui-btn">开始上传</button>
        </div>
    </div>
    <table class="layui-table upTable"></table>
</div>
<script type="text/javascript">
    var uploader = WebUploader.create({
        swf:  '/static/plugs/webuploader/Uploader.swf',
        server: url,
        chunked: false,
        timeout:0,
        pick: {
            id:"#picker",
            multiple:multiple,
            label:"点击选择文件"
        },
        accept: {
            title: file_type,
            extensions: exts,
            mimeTypes:file_type
        },
        resize: false,
        chunkSize:chunk_size,
        threads:max_files,
        fileSingleSizeLimit:upload_max_filesize
    });
    //文件加入队列
    uploader.on( 'fileQueued', function( file ) {
        $('.upTable').append( tr = '<tr class="tr_'+file.id+'">'+
            '<td>'+
            '<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">' +
            //'<img src="'+result+'" alt="" width="110" height="110">' +
            '</div>'+
            '<div class="layui-col-md9 layui-col-sm9 layui-col-xs9" >'+
            '<div class="upLeftMsg" style="margin-top: 40px;">'+
            '<span class="upTips">等待上传</span>'+
            //进度条开始
            '<div class="progress_'+file.id+'" ></div>'+
            //进度条结束
            '<div class="filename" style="margin-top: 10px">'+file.name+'</div>'+
            '</div>'+
            '</div>'+
            '<input type="hidden" class="layui-input" value="'+file.id+'" name="id">'+
            '</td>'+

            '<td width="120">' +
            '<a class="layui-btn layui-btn-danger layui-btn-xs deleteFileBtn">删除</a>'+
            '<a class="layui-btn  layui-btn-xs restUploadBrn"  style="display: none;">重新上传</a>'+
            '</td>'+
            '</tr>' );
        $(".deleteFileBtn").click(function () {
            $(this).parents("tr").remove()
            uploader.removeFile( file );
        })
        $(".restUploadBrn").click(function () {
            uploader.retry(file);
        })
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '.tr_'+file.id ).find(".progress_"+file.id), $percent = $li.find('.progress .progress-bar');
        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%;height: 10px;border-radius: 5px;background-color: green">' +
                '</div>' +
                '<div class="jindu"></div>'+
                '</div>').appendTo( $li ).find('.progress-bar');
        }
        var ps  = parseInt(percentage* 100);
        if(ps!='100')
        {
            $( '.tr_'+file.id ).find('.upTips').text('文件读取中');
        }else{
            $( '.tr_'+file.id ).find('.upTips').text('文件正在上传，请耐心等待');
        }
        $percent.css( 'width', percentage * 100 + '%' );

        $( '.tr_'+file.id ).find(".jindu").text("进度"+  ps + '%');
    });
    //文件成功处理
    uploader.on( 'uploadSuccess', function( file,response ) {
        $( '.tr_'+file.id ).find('.restUploadBrn').hide();
        if(response.code===1){
            $( '.tr_'+file.id ).find('.upTips').text('已上传');
            $( '.tr_'+file.id ).find(".restUploadBrn").hide();
            fileList.push(response.data)
        }else{
            $( '.tr_'+file.id ).find('.upTips').text('上传失败');
            $( '.tr_'+file.id ).find(".restUploadBrn").show();
        }
        localStorage.setItem("upload",JSON.stringify(fileList));
    });
    //文件失败处理
    uploader.on( 'uploadError', function( file,response ) {
        $( '.tr_'+file.id ).find('.upTips').text('上传失败，请点击上传按钮重新上传');
        $( '.tr_'+file.id ).find('.restUploadBrn').show();
    });
    //完成后触发
    uploader.on( 'uploadComplete', function( file ) {
        $( '.tr_'+file.id ).find('.progress').fadeOut();
    });
    //文件验证不不通过
    uploader.on( 'error', function( file ) {
        layer.msg("选择文件不符合，请重新选择")
    });
    //开始上传
    $("#ctlBtn").on( 'click', function() {
        if ($(this).hasClass('disabled')) {
            return false;
        }
        uploader.upload();
    });
</script>
</body>
</html>